<template>
	<view>
		<view class="flex grey">
			<picker style="flex-grow: 1;" mode="date" fields="day" @cancel="cancel($event , 'startDate')" @change="change($event , 'startDate')">
				<view>{{startDate ? startDate : startText}}</view>
			</picker>
			<view class="plr5">~</view>
			<picker style="flex-grow: 1;text-align: right;" mode="date" fields="day" @cancel="cancel($event , 'endDate')" @change="change($event , 'endDate')">
				<view>{{endDate ? endDate : endText}}</view>
			</picker>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			startText : {
				type : String ,
				default : "请选择"
			},
			endText : {
				type : String ,
				default : "请选择"
			}
		},
		data() {
			return {
				startDate : "" ,
				endDate : "" 
			};
		},
		methods: {
			change : function(e , key){
				this[key] = e.detail.value ;
				this.emit();
			},
			
			cancel : function(e , key){
				this[key] = '' ;
				this.emit();
			},
			
			emit : function(e){
				this.$emit("change" , {
					startDate : this.startDate ? this.startDate + ' 00:00:00' : '' ,
					endDate : this.endDate ? this.endDate + ' 23:59:59' : '' 
				});
			},
			
		}
	}
</script>

<style>

</style>
